<template>
  <div class="zuida">
    <div class="shang">
      教职工号:<el-input
  placeholder="请输入教职工号"
  v-model="id"
  clearable>
  
</el-input>
      姓名:<el-input
  placeholder="请输入姓名"
  v-model="name"
  clearable>
</el-input>

性别:<el-select v-model="value" placeholder="性别" @change="getsex">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      >
    </el-option>
  </el-select>
  <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
    <el-button type="danger" plain @click="del">全部删除</el-button></div>
    <div class="xia">
       <el-table
       ref="multipleTable"
       tooltip-effect="dark"
    :data="tableData"
    border
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
      </el-table-column>
    <el-table-column
      fixed
      prop="id"
      label="教职工号"
      width="100">
    </el-table-column>
    <el-table-column
      fixed
      prop="img"
      label="头像"
      width="80"
      >
      <template slot-scope="scope">
        <el-image :src=scope.row.img :preview-src-list="[scope.row.img]"></el-image>
      </template>
    </el-table-column>
    <el-table-column
      fixed
      prop="date"
      label="就职日期"
      width="120">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="sex"
      label="性别"
      width="70">
    </el-table-column>
    <el-table-column
      prop="classroom"
      label="任教科目"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="家庭地址"
      width="240">
    </el-table-column>
    <el-table-column
      prop="dianhua"
      label="联系电话"
      width="120">
    </el-table-column>
    <el-table-column
      prop="jianshao"
      label="介绍"
      width="150">
    </el-table-column>
    <el-table-column
      label="操作"
      width="150">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row),dialogTableVisible = true" type="text" size="small">查看</el-button>
        <el-button type="text" size="small" @click="handleClick2(scope.row),dialogTableVisible2 = true">编辑</el-button>
        <el-button @click="delpassword(scope.row)" type="text" size="small"  >重置密码</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- --分页-- -->
   <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="count">
      <!-- 页数 -->
    </el-pagination>
  </div>
    </div>
    <el-dialog title="详细信息" :visible.sync="dialogTableVisible">
  <div>
    <!-- <div class="block"><el-avatar shape="square" :size="50" :src="this.message.img">
      </el-avatar></div> -->
      <el-image 
    style="width: 100px;"
    :src="this.message.img" 
    :preview-src-list="[this.message.img]">
  </el-image>
    <div class="index">羊羊编号:{{this.message.id}}</div>
    <el-divider></el-divider>
    <div class="index">姓名:{{this.message.name}}
      
    </div>
    <el-divider></el-divider>
    <div class="index">性别:{{this.message.sex}}</div>
    <el-divider></el-divider>
    <div class="index">班级:{{this.message.classroom}}</div>
    <el-divider></el-divider>
    <div class="index">电话:{{this.message.dianhua}}</div>
    <el-divider></el-divider>
    <div class="index">地址:{{this.message.address}}</div>
    <el-divider></el-divider>
    <div class="index">介绍:{{this.message.jianshao}}</div>
    <el-divider></el-divider>
  </div>
</el-dialog>
<!-- 编辑 -->
<el-dialog title="信息编辑" :visible.sync="dialogTableVisible2">
  <el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
  <el-form-item label="羊羊编号: ">
    <el-input  disabled="true" :placeholder="bianji.id"></el-input>
  </el-form-item>
  <el-form-item label="头像: ">
    <el-upload
        class="avatar-uploader"
        action=""
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :http-request="httpRequest"
        :class="{'demo-httpRequestImg':httpRequestImg}"
        >
        <!-- +的图片-->
        <el-image 
    style="width: 100%;"
    :src="dialogImageUrl" 
    :preview-src-list="srcList">
  </el-image>
    </el-upload>
    <!-- 被添加的列表图片 -->
    <el-dialog :visible.sync="dialogVisibleImg" append-to-body class="ImgClass"
    :class="{'demo-httpRequestImg':!httpRequestImg}">
        <img width="100%" :src="sizeForm.img" alt="">
        </el-dialog>
  </el-form-item>
  <el-form-item label="姓名: ">
    <el-input v-model="sizeForm.name" :placeholder="bianji.name"></el-input>
  </el-form-item>
  <el-form-item label="性别: ">
    <el-select v-model="sizeForm.sex" :placeholder="bianji.sex">
      <el-option label="帅哥" value="帅哥"></el-option>
      <el-option label="美女" value="美女"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="所在班级: ">
    <el-input v-model="sizeForm.classroom" :placeholder="bianji.classroom"></el-input>
  </el-form-item>
  <el-form-item label="家庭地址: ">
    <el-input v-model="sizeForm.address" :placeholder="bianji.address"></el-input>
  </el-form-item>
  <el-form-item label="监护人电话: ">
    <el-input v-model="sizeForm.dianhua" :placeholder="bianji.dianhua"></el-input>
  </el-form-item>
  <el-form-item label="简介: ">
    <el-input v-model="sizeForm.jianshao" :placeholder="bianji.jianshao"></el-input>
  </el-form-item>
  <el-form-item size="large">
    <el-button type="primary" @click="onSubmit">确认更新</el-button>
    <el-button @click="exit">取消</el-button>
  </el-form-item>
</el-form>
</el-dialog>
<!-- 成功消息弹窗 -->
  </div>
</template>
<script>
import router from '@/router';
import {upload, uploadimg} from '../aliyun/oss'
export default {
  data() {
    return {
      options: [{
          value: '美女',
          label: '美女'
        }, {
          value: '帅哥',
          label: '帅哥'
        }, {
          value: '',
          label: ''
        }],
       value:'',
      input: '',
      id:'',
      name:'',
      classroom:'',
      sum:5,
      page:0,
      tableData: '',
      multipleSelection:[],
      message:"",
      dialogTableVisible: false,
      dialogTableVisible2: false,
      bianji:"",
      sizeForm: {
        id:'',
        name: '',
        sex:'',
        classroom:'',
        address:'',
        dianhua:'',
        jianshao:'',
        img:''
        },
        dialogImageUrl: '',//预览url
      dialogVisibleImg:false,//加载图片的可见性
      httpRequestImg:false,//展示单个图片
      srcList:'',
      token:''
    }
  },mounted(){
      this.token=localStorage.getItem('token')
      this.$store.commit('isShow')
       this.search();
    },
  methods: {
    delpassword(row){
      this.axios.get("/updatepwdteacher/"+row.id,{headers:{
              'token':this.token
            }}
        ).then((res)=>{ 
          if(res.data.msg!="error"){
                this.$message({
          showClose: true,
          message: '恭喜你，密码重置成功!',
          type: 'success'
        });
              }
              else{
                this.$message({
               showClose: true,
               message: '抱歉!你还未登录!',
               type: 'warning'
                });
                this.$router.push("/")
              }
          
      }).catch((err)=>{
        this.$message({
          showClose: true,
          message: '抱歉!密码重置失败!',
          type: 'warning'
        });
      })
    },
    handclose(done){
      done();
      if(this.dialogImageUrl!=this.sizeForm.img){
             router.go(0);
        }
    },
    httpRequest(file) { //上传成功
      this.httpRequestImg = true;
      uploadimg(file.file).then(url=>{
        console.log("文件是:"+url);
        // this.dialogImageUrl=url;
        this.sizeForm.img=url;
        // this.srcList=''
      }).catch(error=>{
        console.log(error);
      })
    },
    handlePictureCardPreview(file) { //预览
      this.dialogImageUrl = file.url;
      this.dialogVisibleImg = true;
      console.log(file);
    },
    handleRemove(file, fileList) { //删除
      this.httpRequestImg = false;
      console.log(file, fileList);
      this.sizeForm.img=this.dialogImageUrl
    },
    exit(){
      // this.httpRequestImg = true
        this.dialogTableVisible2=false;
        console.log("999");
        if(this.dialogImageUrl!=this.sizeForm.img){
             router.go(0);
        }
        
      },
    onSubmit() {
        this.axios.post("/updateteacher",this.sizeForm,
        {headers:{
              'token':this.token
            }}
        ).then((res)=>{
          if(res.data.msg!="error"){
                this.$message({
          showClose: true,
          message: '恭喜你，更改用户信息成功!',
          type: 'success'
        });
              }
              else{
                this.$message({
               showClose: true,
               message: '抱歉!你还未登录!',
               type: 'warning'
                });
                this.$router.push("/")
              }
          
        console.log(res);
        // this.student();
        this.search()
        this.dialogTableVisible2=false;
        if(this.dialogImageUrl!=this.sizeForm.img){
             router.go(0);
        }
      }).catch((err)=>{
        this.$message({
          showClose: true,
          message: '抱歉!更改用户信息失败!',
          type: 'warning'
        });
      })
      },
      exit(){
        this.dialogTableVisible2=false;
      },
    del(){
    this.axios.get("/delteacher/"+this.multipleSelection,
    {headers:{
              'token':this.token
            }}).then((res)=>{
              if(res.data.msg!="error"){
               console.log(res);
        // this.student()
        this.search() 
              }
              else{
                this.$message({
               showClose: true,
               message: '抱歉!你还未登录!',
               type: 'warning'
                });
                this.$router.push("/")
              }
        
      })
  },
    search(){
      this.axios.get("/selectteachercha/"+this.page+"/"+this.sum,{
        params:{
          'id':this.id,
        'name':this.name,
        'sex':this.sex
        },
        headers:{
              token:this.token,
              
            }
      }).then((res)=>{
        if(res.data.msg!="error"){
                this.tableData=res.data.data.fengye;
        this.count=res.data.data.count;
              }
              else{
                this.$message({
               showClose: true,
               message: '抱歉!你还未登录!',
               type: 'warning'
                });
                this.$router.push("/")
              }
        // console.log(res);
        
      })
    },
    getsex(e){
      // console.log(e);
      this.sex=e
    },
      handleClick(row) {//点击查看和编辑
        this.message=row;
        // console.log(row);
      },
      handleClick2(row) {//点击编辑
        this.dialogImageUrl=row.img;
        this.sizeForm.img=row.img;
        this.bianji=row;
        this.sizeForm.id=row.id;
        this.sizeForm.name=row.name;
        this.sizeForm.sex=row.sex;
        this.sizeForm.classroom=row.classroom;
        this.sizeForm.teacher=row.teacher;
        this.sizeForm.address=row.address;
        this.sizeForm.dianhua=row.dianhua;
        this.sizeForm.jianshao=row.jianshao;
      },
      handleSizeChange(val) {
        this.sum=val;
        //条数
        // this.student();
        this.search()
      },
      handleCurrentChange(val) {
        //页数
        this.page=(val-1)*this.sum;
        this.search()
        // this.student();

      },
      handleSelectionChange(val) {
        for(var i=0;i<val.length;i++){
          this.multipleSelection[i]=val[i].id;
        }
      },
      student(){//没用了!!!
        //开始索引, 条数
        this.axios.get("/selectteacherpage/"+this.page+"/"+this.sum,
        {headers:{
              'token':this.token
            }}).then((res)=>{
              if(res.data.msg!="error"){
                this.tableData=res.data.data.fengye;
                this.count=res.data.data.count;
              }
              else{
                this.$message({
               showClose: true,
               message: '抱歉!你还未登录!',
               type: 'warning'
                });
                this.$router.push("/")
              }
        
      })
      }
    }
    
}
</script>
<style lang="less" scoped>
  .zuida{
    width: 100%;
    height: 100%;
    // background-color:blue;
  }
  .shang{
    display: flex;
    position: relative;
    height: 100px;
    font-size: 20px;
    line-height: 100px;
  }
  .shang /deep/ .el-input{
    margin-right: 40px;
    width: 16%;
  }
  /deep/ .el-input__inner{
    font-size: 18px;
  }
  /deep/ .el-select .el-input{
    width: 100px;
  }
  .shang /deep/ .el-button{
    margin-left: 30px;
    // padding: 0;
    height: 40px;
    margin-top: 30px;
  }
  .index{
    margin-left: 20px;
    width: 100%;
    height: 36px;
    line-height: 36px;
  }
  /deep/ .el-dialog__body{
    font-size: 16px;
    padding: 10px 20px;
  }
  /deep/ .el-dialog{
    width: 30%;
  }
  /deep/ .el-divider--horizontal{
    padding: 0;
    margin: 0;
  }
  /deep/ .el-form-item__label{
    padding: 0;
  }
  .demo-httpRequestImg{
    /deep/ .el-upload--picture-card{
        display: none;
    }
  } 
  .zuida{
    /deep/ .el-upload--picture-card{
      border: 1px dashed #c0ccda00;
}
  }
</style>